<template>
  <div>
    <h1>通过内容列表</h1>
    <el-input v-model="input" placeholder="请输入你要查询的内容" style="width:300px;margin:20px 0"></el-input>
    <el-button type="primary" @click="search">查询</el-button>
    <el-table :data="item">
      <el-table-column width="112px" type="index" label="序号">
      </el-table-column>
      <el-table-column prop="number" label="学号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="origin" label="原因"> </el-table-column>
      <el-table-column prop="carTypes" label="车型"> </el-table-column>
      <el-table-column prop="carNumber" label="车牌"> </el-table-column>
      <el-table-column prop="phone" label="手机号码"> </el-table-column>
      <el-table-column prop="image[0]" label="图片">
        <template v-slot="scope">
          <img :src="scope.row.image[0]" style="height: 3rem" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="handleconsole(scope.row)"
            >查看图片</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="图片列表" :visible.sync="dialogVisible" width="30%">
      <el-image
        :preview-src-list="data"
        style="width: 100px; height: 100px"
        v-for="(items,index) in data"
        :key="index"
        :src="items"
        alt=""
      ></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: [],
      dialogVisible: false,
      data: [],
      input: ""
    };
  },
  methods: {
    async fetch() {
      const res = await this.$http.get("rest/Items");
      // const items = res.data;
      this.item = res.data;
      // this.item =  items.map(value=> {
      //   value.images = ''
      //   value.images = value.image[0]
      //   return value
      // })
      console.log(this.item);
    },
    handleconsole(row) {
      console.log(row, "row");
      this.dialogVisible = true;
      this.data = row.image;
    },
     async search() {
      const input = {
        data: this.input,
      };
      const res = await this.$http.post("rest/Items", input);
      this.item = res.data
    },
  },
  created() {
    this.fetch();
  },
};
</script>

<style scoped>
</style>
